Probiz - Documentation
Created: Mei 31, 2024
By: Rometheme
Email: rometheme@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Getting Started

Probiz is a clean, modern, and fully responsive HTML Template. it is designed for Business Consulting. Probiz Template’s uniqueness is due to its amazingly beautiful designs and easy to use Website template solution that maximizes user satisfaction. It is built using bootstrap 5.3 framework, works totally responsive, easy to customise, well commented codes and seo friendly

This template made with Bootstrap, using HTML5, CSS3, JS and jQuery.

Get Yourself a Code Editor

Yes, it’s completely possible to edit HTML in Notepad or a similar program, but things will go much more smoothly for you if you use a proper code editing app. One of the main reasons is you’ll get colored highlighting of your code, as you’ll see shortly, which will make it much easier to read and edit.

I recommend Visual Studio Code, which you can download here: https://code.visualstudio.com/download

Download the template main files from Themeforest

  • First, you need to download the template files from your Themeforest account. Navigate to your Downloads tab on Themeforest.
  • Find the templates.
  • Click the Download button,
  • and then click "All Files and documentation".

Most HTML templates will come in a ZIP file - if so, go ahead and extract yours now. Then look around inside the template’s folders until you find the “index.html” or “index.htm” file.

In our example template the “index.html” file is found in the “HTML” directory.

Page Layout

You can follow the following code structure which is made easy and simple to understand.


Code example:

<!-- Header -->
<div class="bg-accent-color py-3">
...
</div>

<header class="sticky-top bg-white">
...
</header>

<!-- Banner -->
<div class="section position-relative">
...
</div>

<!-- Why Choose Us -->
<div class="section overflow-visible">
...
</div>

<!-- Section About Us -->
<div class="section pb-0">
...
</div>

<!-- Section Partner -->
<div class="section bg-accent-color">
...
</div>

<!-- Section Services -->
<div class="section">
...
</div>

<!-- Section CTA -->
<div class="section position-relative bg-attach-fixed">
...
</div>

<!-- Case Studies -->
<div class="section pb-0">
...
</div>

<!-- Section Counter -->
<div class="section pt-0">
...
</div>

<!-- Team -->
<div class="section">
...
</div>


<!-- Testimonials -->
<div class="section position-relative ps-0">
...
</div>

<!-- Blog -->
<div class="section">
...
</div>

<!-- Footer -->
<footer>
<div class="section pb-0 bg-accent-color text-white">
...
</div>
<div class="section d-flex flex-xl-row flex-column gap-3 justify-content-center py-3">
...
</div>
</footer>

Header

To change the header, please change the code inside the header comment tag. Here you can also change the logo and nav menu.


Code example:

<!-- Header -->
<div class="bg-accent-color py-3">
	<div class="r-container">
		<div
			class="d-flex flex-xl-row flex-column justify-content-center justify-content-xl-between align-items-center font-2">
			<div
				class="d-flex flex-xl-row flex-column flex-wrap align-items-center justify-content-center justify-content-xl-start text-white mb-3 mb-xl-0 gap-xl-5 gap-2">
				<span class="d-flex flex-row align-items-center gap-2">
					<i class="fa-solid fa-envelope accent-color-2"></i>
					hello@domainsite.com
				</span>
				<span class="d-flex flex-row align-items-center gap-2">
					<i class="fa-solid fa-phone accent-color-2"></i>
					0761-8523-398
				</span>
				<span class="d-flex flex-row align-items-center gap-2">
					<i class="fa-solid fa-location-dot accent-color-2"></i>
					KLLG St, No.99, Pku City, ID 28289
				</span>
			</div>
			<div class="social-container mb-xl-0 mb-3">
				<a href="https://www.facebook.com" class="social-item">
					<i class="fa-brands fa-xs fa-facebook-f"></i>
				</a>
				<a href="https://www.twitter.com" class="social-item">
					<i class="fa-brands fa-xs fa-twitter"></i>
				</a>
				<a href="https://www.instagram.com" class="social-item">
					<i class="fa-brands fa-xs fa-instagram"></i>
				</a>
				<a href="https://www.youtube.com" class="social-item">
					<i class="fa-brands fa-xs fa-youtube"></i>
				</a>
			</div>
		</div>
	</div>
</div>
<header class="sticky-top bg-white">
	<div class="r-container">
		<nav class="navbar navbar-expand-xl">
			<div class="container-fluid ps-3">
				<div class="logo-container">
					<a class="navbar-brand" href="#"><img src="image/logo.png" alt="" class="img-fluid"></a>
				</div>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
					aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
					<i class="fa-solid fa-bars-staggered accent-color-2"></i>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav ms-auto mb-2 mb-xl-0 gap-xl-4 gap-1">
						<li class="nav-item">
							<a class="nav-link active" aria-current="page" href="index.html">Home</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
								aria-expanded="false">
								About Us
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="about.html">About Us</a></li>
								<li><a class="dropdown-item" href="team.html">Team</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
								aria-expanded="false">
								Services
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="services.html">Services</a></li>
								<li><a class="dropdown-item" href="service_detail.html">Service Details</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
								aria-expanded="false">
								Pages
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="price_plan.html">Pricing Plan</a></li>
								<li><a class="dropdown-item" href="faq.html">FAQs</a></li>
								<li><a class="dropdown-item" href="404.html">404 Error</a></li>
								<li><a class="dropdown-item" href="case_studi.html">Case Studies</a></li>
								<li><a class="dropdown-item" href="case_detail.html">Case Detail</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
								aria-expanded="false">
								Blog
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="blog.html">Blog</a></li>
								<li><a class="dropdown-item" href="single_blog.html">Single Post</a></li>
							</ul>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="contact.html">Contact Us</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
</header>
<!-- End Header -->

Logo Setting

To change the logo, please change the code in the following code.


Code example:

	<div class="logo-container">
		<a class="navbar-brand" href="#"><img src="image/logo.png" alt="" class="img-fluid"></a>
	</div>

Burger Menu

To change the Burger Menu, you can change the code inside the ul tag button.


Code example:

	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
							aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		<i class="fa-solid fa-bars-staggered accent-color-2"></i>
	</button>

Navigation Structure

To change the navigation, you can change the code inside the ul tag with class navbar-nav.


Code example:

	<ul class="navbar-nav ms-auto mb-2 mb-xl-0 gap-xl-4 gap-1">
		<li class="nav-item">
			<a class="nav-link active" aria-current="page" href="index.html">Home</a>
		</li>
		<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
				About Us
			</a>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="about.html">About Us</a></li>
				<li><a class="dropdown-item" href="team.html">Team</a></li>
			</ul>
		</li>
		<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
				Services
			</a>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="services.html">Services</a></li>
				<li><a class="dropdown-item" href="service_detail.html">Service Details</a></li>
			</ul>
		</li>
		<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
				Pages
			</a>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="price_plan.html">Pricing Plan</a></li>
				<li><a class="dropdown-item" href="faq.html">FAQs</a></li>
				<li><a class="dropdown-item" href="404.html">404 Error</a></li>
				<li><a class="dropdown-item" href="case_studi.html">Case Studies</a></li>
				<li><a class="dropdown-item" href="case_detail.html">Case Detail</a></li>
			</ul>
		</li>
		<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
				Blog
			</a>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="blog.html">Blog</a></li>
				<li><a class="dropdown-item" href="single_blog.html">Single Post</a></li>
			</ul>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="contact.html">Contact Us</a>
		</li>
	</ul>

Footer

To change the footer, you can change the code inside the footer tag.


Code example:

<footer>
	<div class="section pb-0 bg-accent-color text-white">
		<div class="r-container">
			<div class="border-bottom border-accent-2 pb-xl-5 pb-0">
				<div class="row row-cols-xl-3 row-cols-1">
					<div class="col col-xl-4 mb-3">
						<div class="d-flex flex-column gap-3 pe-xl-5">
							<img src="image/logo-(1).png" alt="" class="img-fluid" width="250">
							<p>
								Probiz Firm provides a very fast and responsible advice legal service.
							</p>
							<div class="social-container mb-xl-0">
								<a href="https://www.facebook.com" class="social-item-2">
									<i class="fa-brands fa-xs fa-facebook-f"></i>
								</a>
								<a href="https://www.twitter.com" class="social-item-2">
									<i class="fa-brands fa-xs fa-twitter"></i>
								</a>
								<a href="https://www.instagram.com" class="social-item-2">
									<i class="fa-brands fa-xs fa-instagram"></i>
								</a>
								<a href="https://www.youtube.com" class="social-item-2">
									<i class="fa-brands fa-xs fa-youtube"></i>
								</a>
							</div>
						</div>
					</div>
					<div class="col col-xl-8 mb-3">
						<div class="row row-cols-xl-3 row-cols-1">
							<div class="col-xl-3 mb-3">
								<div class="d-flex flex-column gap-3">
									<div class="pb-2 w-max-content border-bottom border-accent-2">
										<h4 class="font-1">Quick Links</h4>
									</div>
									<ul class="list gap-2 accent-color list-circle">
										<li>
											<a href="index.html" class="link d-flex flex-row gap-3 align-items-center">
												Home
											</a>
										</li>
										<li>
											<a href="about.html" class="link d-flex flex-row gap-3 align-items-center">
												About Us
											</a>
										</li>
										<li>
											<a href="price_plan.html" class="link d-flex flex-row gap-3 align-items-center">
												Pricing Plan
											</a>
										</li>
										<li>
											<a href="blog.html" class="link d-flex flex-row gap-3 align-items-center">
												News & Blog
											</a>
										</li>
										<li>
											<a href="contact.html" class="link d-flex flex-row gap-3 align-items-center">
												Contact Us
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="col-xl-4 mb-3">
								<div class="d-flex flex-column gap-3">
									<div class="pb-2 w-max-content border-bottom border-accent-2">
										<h4 class="font-1">Services</h4>
									</div>
									<ul class="list gap-2 accent-color list-circle">
										<li>
											<a href="service_detail.html" class="link d-flex flex-row gap-3 align-items-center">
												Personal Injury Law
											</a>
										</li>
										<li>
											<a href="service_detail.html" class="link d-flex flex-row gap-3 align-items-center">
												Family Law
											</a>
										</li>
										<li>
											<a href="service_detail.html" class="link d-flex flex-row gap-3 align-items-center">
												Criminal Defense
											</a>
										</li>
										<li>
											<a href="service_detail.html" class="link d-flex flex-row gap-3 align-items-center">
												Real Estate Law
											</a>
										</li>
										<li>
											<a href="service_detail.html" class="link d-flex flex-row gap-3 align-items-center">
												Business Law
											</a>
										</li>
										<li>
											<a href="service_detail.html" class="link d-flex flex-row gap-3 align-items-center">
												Employment Law
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="col-xl-5 mb-xl-3 mb-0">
								<div class="d-flex flex-column gap-3">
									<div class="pb-2 w-max-content border-bottom border-accent-2">
										<h4 class="font-1">Contact Us</h4>
									</div>
									<ul class="list p-0 gap-3">
										<li>
											<span class="d-flex flex-row align-items-center gap-3">
												<div class="contact-item">
													<i class="fa-solid fa-location-dot"></i>
												</div>
												KLLG st, No.99, Pku City, ID 28289
											</span>
										</li>
										<li>
											<span class="d-flex flex-row align-items-center gap-3">
												<div class="contact-item">
													<i class="fa-solid fa-phone"></i>
												</div>
												0761-8523-398
											</span>
										</li>
										<li>
											<span class="d-flex flex-row align-items-center gap-3">
												<div class="contact-item">
													<i class="fa-solid fa-envelope"></i>
												</div>
												hello@domainsite.com
											</span>
										</li>
										<li>
											<span class="d-flex flex-row align-items-center gap-3">
												<div class="contact-item">
													<i class="fa-solid fa-globe"></i>
												</div>
												www.domainsite.com
											</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="section d-flex flex-xl-row flex-column gap-3 justify-content-center py-3">
					<span class="text-xl-center text-start fs-6 font-2">
						COPYRIGHT © 2024 ROMETHEME. ALL RIGHTS RESERVED.
					</span>
				</div>
			</div>
		</div>
	</footer>

Change Image

If you want to change the image with your own you can change the html code inside the img tag.


Before

<img src="image/image-600x600-21.jpg" style="object-fit: cover;"
		class="img-fluid left-0 w-100 h-100" alt="">

If your file name is image-700x700.jpg you can change it as follows.

After

<img src="image/image-700x700.jpg" style="object-fit: cover;"
		class="img-fluid left-0 w-100 h-100" alt="">

CSS Files and Structure

As a first step if you want to change the font, you can import it in this section.

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Cantata+One&display=swap');

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following: 

:root {
	--primary: #FFFFFF;
	--text-color: #6B6B6B;
	--background-color: #F4F4F4;
	--accent-color: #04383F;
	--accent-color-2: #F39005;
	--font-1: "Cantata One", sans-serif;
	--font-2: "Cabin", sans-serif;
}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. 

.text-gray {color: #somecolor;}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

Open the style.css file form the root folder and search h1 until you find the color property in the file. It looks line this:

h1 {
	font-size: 78px;
}	
h2 {	
	font-size: 60px;
}	
h3 {
	font-size: 48px
}
Change the color with the one you want and hit save. If you want to change only the h1 color, you have to separate the h1 and give it another color. The css should look like this.

h1 {
	font-size: 70px;
}
Now, lets say we wanted h1 to poin to http://google.com. At this point the h1 looks like this:

<h1>Shortcodes: Typography & paragraph styles</h1>

To make it point to a specific URL the h1 must look like this:

<h1><a href="http://www.google.com">Shortcodes: Typography & paragraph styles</a></h1>

You can make changes to the css to any elements. You just need to know the name of the element or div either by using FireBug or by opening the HTML and then search for that element in the css. Piece of cake!


Social Icons

social icon

To add a link to your social icon paste the necessary URL into the <a href=> tag. See the example below:

		<a href="https://www.facebook.com" class="social-item">< class="fa-brands fa-facebook-f"></i></a>

JavaScript

This template imports different js files for the different sliders, lightboxes and interactive tabs from the homeplage and the rest of the pages. All the js is built around JQuery. What follows are some examples where jQuery was used:

SwiperJS

$(function () {
	var swiperImage = new Swiper('.swiper.swiperImage', {
		autoplay: {
			delay: 3000
		},
		speed: 2000,
		slidesPerView: 3,
		slidesPerGroup: 1,
		spaceBetween: 0,
		initialSlide: 1,
		loop: false,
		grabCursor: true,
		breakpoints: {
			// when window width is >= 360px
			360: {
				slidesPerView: 1,
				slidesPerGroup: 2,
			},
			// when window width is >= 768px
			768: {
				slidesPerView: 1,
				slidesPerGroup: 1,
			},
			// when window width is >= 1024px
			1024: {
				slidesPerView: 3,
				slidesPerGroup: 1,
			}
		},
		// If we need pagination
		pagination: {
			enabled: false,
			el: '.swiper-pagination',
			type: 'bullets',
			clickable: true,
		},
	});

});

$(function () {
	var swiperTestimonials = new Swiper('.swiperTestimonials', {
		autoplay: {
			delay: 3000
		},
		speed: 2000,
		slidesPerView: 2,
		slidesPerGroup: 1,
		spaceBetween: 10,
		loop: false,
		grabCursor: true,
		breakpoints: {
			// when window width is >= 360px
			360: {
				slidesPerView: 1,
			},
			// when window width is >= 768px
			768: {
				slidesPerView: 2,
			},
			// when window width is >= 1024px
			1024: {
				slidesPerView: 2,
			}
		},
		// If we need pagination
		pagination: {
			enabled: true,
			el: '.swiper-pagination',
			type: 'bullets',
			clickable: true,
		},
	});

});

To change the Configuration, please see SwiperJS documentation SwiperJS

Maps Google

Open contact.html file and change following area

	<iframe loading="lazy" class="maps"
	src="https://maps.google.com/maps?q=London%20Eye%2C%20London%2C%20United%20Kingdom&t=m&z=14&output=embed&iwloc=near"
	title="London Eye, London, United Kingdom"
	aria-label="London Eye, London, United Kingdom">
	</iframe>

Open contact.html file and change following area with your Google Map API KEY Get Api Key



Contact Form

Open the file in php/form-process.php line 9 , line 26 and line 44
$to = "recipient@example.com"
edited "recipient@example.com" with your email



Search Engine Optimization

In order to improve your search engine ranking, and thus enable your web site to appear among search results, please don't forget to change the description and keywords with your own.

<meta name="description" content="">
<meta name="keywords" content="">

Sources and Credits

I've used the following images, icons or other files as listed.

HTML, CSS and JS:

Images:

Fonts:

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" div.

Rometheme

Version 1.0.1

Update on 14 November 2024

Update documentation

Update CSS With Style Guide and Table of Content

JavaScript load on bottom HTML pages

All import with local library

Version 1.0.0

Relase on 31 Mai 2024